<template>
   <!-- <el-select class="timeParam" @change="addWindMarkers" v-model="query.timeParam" placeholder="请选择时间">
      <el-option 
        v-for="item in timeOptions" 
        :key="item.dateTimeString" 
        :label="item.formattedDateTime" 
        :value="item.dateTimeString" 
      />
    </el-select> -->
  <div class="device-status-panel">
    <div class="panel-header">
      <h3>设备状态</h3>
      <div class="header-controls">
        <span v-if="isOffline" class="offline-indicator">设备不在线</span>
      </div>
    </div>
    <div class="panel-content">
      <!-- 雷达选择 -->
      <div class="status-item">
        <label>雷达选择:</label>
        <el-select v-model="selectedRadar" placeholder="请选择雷达" size="small">
          <el-option
            v-for="radar in radarOptions"
            :key="radar.value"
            :label="radar.label"
            :value="radar.value"
          />
        </el-select>
      </div>
      <div class="status-row">
         <!-- 雷达状态 -->
         <div class="status-item">
          <label>雷达状态:</label>
          <span :class="['status-badge', getLidarClass(deviceStatus.lidarStatus)]">
            {{ getLidarStatus[deviceStatus.lidarStatus] }}
          </span>
        </div>
        <div class="status-item">
          <label>激光器状态:</label>
          <span :class="['status-badge', getStatusClass(deviceStatus.laserStatus)]">
            {{ deviceStatus.laserStatusDescription }}
          </span>
        </div>
        <!-- 测量状态 -->
       
        <!-- <div class="status-item">
          <label>采集卡状态:</label>
          <span :class="['status-badge', getStatusClass(deviceStatus.cardstatus)]">
            {{ deviceStatus.cardStatusDescription }}
          </span>
        </div> -->
      </div>
      
      <div class="status-row">
         <!-- 雷达状态 -->
        <!-- <div class="status-item">
          <label>雷达状态:</label>
          <span :class="['status-badge', getStatusClass(deviceStatus.laserStatus)]">
            {{ deviceStatus.laserStatusDescription }}
          </span>
        </div> -->
        
        
      </div>
      <div class="status-row">
          <div class="status-item">
            <label>方位角:</label>
            <span class="status-value">{{ deviceStatus.azimuth }}°</span>
          </div>
          
          <!-- 角度 -->
          <div class="status-item">
            <label>仰角:</label>
            <span class="status-value">{{ deviceStatus.elevation }}°</span>
          </div>
      </div>
      <div class="status-row">
          <!-- 供电模式 -->
          <div class="status-item">
            <label>激光器温度:</label>
            <span class="status-value">
              {{ deviceStatus.laserTemp }}
            </span>
          </div>
          <!-- 测量状态 -->
        <div class="status-item">
          <label>状态描述:</label>
          <span :class="['status-badge', getDesClass(deviceStatus.statusDescription)]">
            {{ deviceStatus.statusDescription }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, toRefs, watch } from 'vue'
import {
  windlidarStatus,
  addAlarmList
} from '@/api/system/user'
const selectedRadar = ref('32.390648,117.050972')

// 雷达选项配置，包含坐标和对应的城市代码
const radarOptions = ref([
  { label: '合肥站: 32.390648,117.050972', value: '32.390648,117.050972', city: 'hefei' },
  { label: '宣城站: 30.851,119.009', value: '30.851,119.009', city: 'xuancheng' },
])
const state = reactive({
  deviceStatus:{
    laserStatus: null,
    laserStatusDescription: null,
    cardstatus: null,
    cardStatusDescription: null,
    azimuth: null,
    elevation: null,
    laserTemp: null,
    laserStatus: null,
    statusDescription: null,
  },
  alarmQuery: {
    type: '1',
    city: 'hefei'
  }
})
const { deviceStatus,alarmQuery}=toRefs(state)

// 设备不在线状态
const isOffline = ref(false)

// 定时器变量
let statusTimer = null
let alarmReported = false

const getStatusClass = (status) => {
  switch (status) {
    case '正常':
      return 'status-normal'
    case '异常':
      return 'status-abnormal'
    default:
      return 'status-normal'
  }
}
const getLidarStatus = {
  0: '待机',
  1: '工作中',
  2: '故障',
}


const getLidarClass=  (status) => {
  switch (status) {
    case '0':
      return 'status-normal'
    case '1':
      return 'status-abnormal'
    default:
      return 'status-normal'
  }
}
const getDesClass=  (status) => {
  switch (status) {
    case '在线':
      return 'status-normal'
    case '离线':
      return 'status-abnormal'
    default:
      return 'status-normal'
  }
}
// 模拟实时更新设备状态
const updateDeviceStatus = async () => {
  try {
    // 这里可以连接 SignalR 或其他实时数据源
    const res = await windlidarStatus()
    
    // 判断返回数据是否为空或无效
    if (!res || !res.data || Object.keys(res.data).length === 0) {
      isOffline.value = true
      return
    }
    
    res.data.azimuth = res.data.azimuth.toFixed(2)
    res.data.elevation = res.data.elevation.toFixed(2)
    res.data.laserTemp = res.data.laserTemp.toFixed(2)
    state.deviceStatus = res.data
    isOffline.value = false
    alarmReported = false
  } catch (error) {
    // 接口报错时设置为不在线
    console.error('获取设备状态失败:', error)
    isOffline.value = true
    if (!alarmReported) {
      try {
        await addAlarmList(state.alarmQuery)
        alarmReported = true
      } catch (alarmError) {
        console.error('上报报警信息失败:', alarmError)
      }
    }
  }
}

onMounted(() => {
  // 立即执行一次
  updateDeviceStatus()
  if (statusTimer) {
    clearInterval(statusTimer)
    statusTimer = null
  }
  // 设置定时器，每分钟刷新一次
  statusTimer = setInterval(() => {
    updateDeviceStatus()
  }, 10000) // 60000毫秒 = 1分钟
  
  // 派发一次初始选中的雷达坐标和城市代码
  try {
    const [latStr, lngStr] = (selectedRadar.value || '').split(',')
    const lat = parseFloat(latStr)
    const lng = parseFloat(lngStr)
    // 查找当前选中雷达对应的城市代码
    const currentRadar = radarOptions.value.find(r => r.value === selectedRadar.value)
    const city = currentRadar ? currentRadar.city : 'hefei' // 默认合肥
    if (!Number.isNaN(lat) && !Number.isNaN(lng)) {
      window.dispatchEvent(new CustomEvent('radar-selected', { detail: { lat, lng, city } }))
    }
  } catch {}
})

// 组件卸载时清除定时器，防止内存泄漏
onBeforeUnmount(() => {
  if (statusTimer) {
    clearInterval(statusTimer)
    statusTimer = null
  }
})

// 监听雷达选择变化，向全局派发事件（包含坐标和城市代码）
watch(selectedRadar, (val) => {
  try {
    const [latStr, lngStr] = (val || '').split(',')
    const lat = parseFloat(latStr)
    const lng = parseFloat(lngStr)
    // 查找当前选中雷达对应的城市代码
    const currentRadar = radarOptions.value.find(r => r.value === val)
    const city = currentRadar ? currentRadar.city : 'hefei' // 默认合肥
    if (!Number.isNaN(lat) && !Number.isNaN(lng)) {
      window.dispatchEvent(new CustomEvent('radar-selected', { detail: { lat, lng, city } }))
    }
  } catch {}
})
</script>

<style scoped lang="scss">
.device-status-panel {
  background: transparent;
  backdrop-filter: blur(8px);
  border: none;
  border-radius: 8px;
  padding: 8px;
  color: #ffffff;
  width: 100%;
  max-width: 100%;
  height: 100%;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-shrink: 0;
    padding: 9px 16px;
    background: linear-gradient(135deg, rgba(24, 150, 146, 0.8) 0%, rgba(24, 150, 146, 0.6) 100%);
    border: 1px solid rgba(24, 150, 146, 0.4);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(24, 150, 146, 0.2);
    position: relative;
    overflow: hidden;
    min-height: 40px;
    backdrop-filter: blur(8px);
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
      pointer-events: none;
    }
    
    h3 {
      margin: 0;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
      letter-spacing: 1px;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      
      &::before {
        content: '📡';
        font-size: 16px;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
        animation: iconPulse 2s ease-in-out infinite;
      }
      
      &::after {
        content: '';
        position: absolute;
        left: -8px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 20px;
        background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.3) 100%);
        border-radius: 2px;
        box-shadow: 0 0 8px rgba(255,255,255,0.5);
      }
    }
    
    .header-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .offline-indicator {
        color: #ff4444;
        font-weight: bold;
        font-size: 12px;
        padding: 2px 8px;
        background: rgba(255, 68, 68, 0.2);
        border: 1px solid rgba(255, 68, 68, 0.4);
        border-radius: 4px;
        animation: blink 1s infinite;
      }
    }
  }
  
  .panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    overflow-y: auto;
    .status-row{
      display: flex;
      justify-content: space-between;
      align-content: center;
      gap: 8px;
    }
    .status-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1px 0;
      // border-bottom: 2px solid rgba(243, 244, 246, 0.6);
      flex: 1;
      padding-right: 5px;
      &:last-child {
        border-bottom: none;
      }
      
      label {
        font-size: 12px;
        color: #ffffff;
        min-width: 50px;
        font-weight: 500;
        margin-right: 8px;
        flex-shrink: 0;
      }
      
      .status-badge {
        padding: 2px 4px;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 600;
        min-width: 40px;
        text-align: center;
        flex-shrink: 0;
        &.status-normal {
          background: rgba(5, 150, 105, 0.8);
          color: #ffffff;
          border: 1px solid rgba(5, 150, 105, 0.6);
        }
        
        &.status-abnormal {
          background: rgba(220, 38, 38, 0.8);
          color: #ffffff;
          border: 1px solid rgba(220, 38, 38, 0.6);
        }
      }
      
      .status-value {
        color: #ffffff;
        font-weight: 600;
        font-size: 17px;
        min-width: 60px;
        text-align: right;
        line-height: 2.0;
        flex-shrink: 0;
        background: rgba(24, 150, 146, 0.3);
        padding: 0px 6px;
        margin: 2px 0;
        border-radius: 4px;
        // border: 1px solid rgba(24, 150, 146, 0.5);
      }
      
      .el-select {
        width: 100%;
        max-width: 200px;
        
        :deep(.el-input__wrapper) {
          border-radius: 6px;
          border: 1px solid rgba(24, 150, 146, 0.4);
          background: rgba(24, 150, 146, 0.2);
          padding: 8px 12px;
          font-size: 14px;
          min-height: 36px;
          
          &:hover {
            border-color: rgba(24, 150, 146, 0.6);
            background: rgba(24, 150, 146, 0.3);
          }
          
          &.is-focus {
            border-color: rgba(24, 150, 146, 0.8);
            box-shadow: 0 0 0 2px rgba(24, 150, 146, 0.2);
            background: rgba(24, 150, 146, 0.3);
          }
        }
        
        :deep(.el-input__inner) {
          font-size: 14px;
          color: #ffffff;
          line-height: 1.4;
        }
        
        :deep(.el-input__suffix) {
          color: #ffffff;
        }
      }
    }
  }
}

// 图标动画
@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)) brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) brightness(1.2);
  }
}

// 不在线指示器闪烁动画
@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0.3;
  }
}
</style>

